<%@page import="com.qf.myschool.entity.Student"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style type="text/css">
			form{
				width: 600px;
				height: auto;
				margin: 0px auto;
				border: solid 1px red;
			}
		</style>
		<script type="text/javascript">
			
			//验证邮箱
			function isEmail(){
				//获得用户输入的邮箱
				var pwd=document.getElementById("email").value;
				//邮箱正则表达式
				var regPwd=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(regPwd.test(pwd)){
					document.getElementById("email1").innerHTML="";
					return true;
				}else{
					document.getElementById("email1").style.color="red";
					document.getElementById("email1").innerHTML="邮箱输入有误!";
					return false;
				}
			}
			
			
			//表单提交事件
			function check(){
				//验证邮箱结果
				var emailResult=isEmail();
				//验证爱好的结果
				var hobbyResult=function(){
					//获得爱好多选框
					var hobbys=document.getElementsByName("hobby");
					//声明一个变量作记录器,记录有多少个爱好被选中
					var count=0;
					for(var i=0;i<hobbys.length;i++){
						if (hobbys[i].checked==true) {
							count++;
						}
					}
					if (count>=2) {
						return true;
					} else{
						alert("选择的爱好不能少于两个!");
						return false;
					}
				}
				
				//表单的所项符合要求就要提交表单,否则阻止表单提交
				if(emailResult&&hobbyResult()){
					return true;
				}else{
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<%--接收请求中用户信息 --%>
		<%
			Student s=(Student)request.getAttribute("stu4");
		%>
		<!--表单-->
		<form method="get" action="CommonServlet" onsubmit="return check()">
			<!-- 用隐藏域传标记到后台 -->
			<input type="hidden" name="method" value="updateStudent"/>
			<table>
				<tr>
					<td></td>
					<td><h1>修改用户信息页面</h1></td>
					<td></td>
				</tr>
				<tr>
					<td>用户名:</td>
					<!-- 所有el表达式取出对象,用对象调用属性时->原理是先找到这个属性的getName(),再根据getName()找到name -->
					<td><input type="text" id="uname" name="name" value="${requestScope.stu4.name}" readonly="readonly"/></td>
					<td id="uname1"></td>
				</tr>
				
				<tr>
					<td>邮箱:</td>
					<td><input type="text" id="email" name="email" value="${stu4.email}" onblur="isEmail()"/></td>
					<td id="email1"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="man" <c:if test="${stu4.sex == 'man'}">checked="checked"</c:if> />男
						<input type="radio" name="sex" value="woman" <c:if test="${stu4.sex == 'woman'}">checked="checked"</c:if> />女
					</td>
					<td></td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="hobby" value="sing" <c:if test="${fn:contains(stu4.hobby,'sing')}">checked="checked"</c:if>   />sing
						<input type="checkbox" name="hobby" value="dance" <c:if test="${fn:contains(stu4.hobby,'dance')}">checked="checked"</c:if> />dance
						<input type="checkbox" name="hobby" value="rap" <c:if test="${fn:contains(stu4.hobby,'rap')}">checked="checked"</c:if> />rap<br />
						<input type="checkbox" name="hobby" value="sleep" <c:if test="${fn:contains(stu4.hobby,'sleep')}">checked="checked"</c:if> />sleep
						<input type="checkbox" name="hobby" value="study" <c:if test="${fn:contains(stu4.hobby,'study')}">checked="checked"</c:if> />study
						<input type="checkbox" name="hobby" value="basketball" <c:if test="${fn:contains(stu4.hobby,'basketball')}">checked="checked"</c:if> />basketball
					</td>
					<td>必填项,至少选择两个爱好</td>
				</tr>
				<tr>
					<td>出生城市:</td>
					<td>
						<select name="city">
							<option value="beijing" <c:if test="${stu4.city=='beijing'}">selected="selected"</c:if> >北京</option>
							<option value="shanghai" <c:if test="${stu4.city=='shanghai'}">selected="selected"</c:if> >上海</option>
							<option value="shengzhen" <c:if test="${stu4.city=='shengzhen'}">selected="selected"</c:if> >深圳</option>
							<option value="zhengzhou" <c:if test="${stu4.city=='zhengzhou'}">selected="selected"</c:if> >郑州</option>
							<option value="dongbei" <c:if test="${stu4.city=='dongbei'}">selected="selected"</c:if> >东北</option>
							<option value="jiyuan" <c:if test="${stu4.city=='jiyuan'}">selected="selected"</c:if> >济源</option>
						</select>
					</td>
					<td></td>
				</tr>
				
				<tr>
					<td></td>
					<td>
						<!--提交按纽-->
						<input type="submit" value="修改" />
						<!--重置按纽-->
						<input type="reset" value="重置"/>
					</td>
					<td></td>
				</tr>
			</table>
		</form>
	</body>
</html>